<!-- 自提订单列表页 -->
<template>
	<view v-if="shenheStatus == 0" class="page-list">
		<!-- 	 <view class="page-header">
      <view class="search-section">
        <view class="input-box">
          <u-search
            :placeholder="$t('mdAdmin.phoneNum')"
            v-model="keyword"
            :show-action="false"
            @search="gotoSearch"
          ></u-search>
        </view>
      </view>
      <view class="top-tabs">
        <view
          class="tab-item"
          :class="num == index ? 'active' : ''"
          v-for="(item, index) in tabList"
          :key="index"
          @click="tabsChange(index, item)"
        >
          <view class="tab-text">{{ item.name }}</view>
          <view class="tab-active"></view>
        </view>
      </view>
    </view>
    <view class="page-body">
      <view
        class="list-item"
        v-for="(item, index) in listData"
        :key="index"
        @click.stop="gotoDetail(item)"
      >
        <view class="order-num">
          <view class="order-no"
            >{{ $t('clerk.orderNum') }}：{{ item.order_no }}</view
          >
          <view class="status" :class="item.is_send == 0 ? 'status-red' : ''">{{
            item.is_send == 0 ? $t('mdAdmin.noClerk') : $t('person.status4')
          }}</view>
        </view>
        <view class="order-goods" :class="isChoose ? 'flex-order' : ''">
          <view v-if="isChoose" class="icon-box" @click.stop="chooseItem(item)">
            <i class="iconfont icon-reduce-fill" v-if="item.is_send == 1"></i>
            <view
              v-if="item.is_send == 0 && !selected(item.id)"
              class="icon-default"
            ></view>
            <i
              class="iconfont icon-success-fill"
              v-if="item.is_send == 0 && selected(item.id)"
            ></i>
          </view>
          <goodsDetail :orderitem="item"></goodsDetail>
        </view>
        <view class="split-line"></view>
        <view class="order-foot" v-if="item.order_type !== '1'">
          <view class="user-info">
            <view class="name"
              >{{ $t('mdAdmin.offlinePerson') }}：{{ item.name }}</view
            >
            <view class="mobile"
              >{{ $t('clerk.phone') }}：{{ item.mobile }}</view
            >
          </view>
          <view
            class="clerk-btn"
            v-if="item.is_send == 0"
            @click="gotoClerk(item)"
          >
            {{ $t('mdAdmin.clerkOrder') }}
          </view>
        </view>
      </view>
    </view>
    <view class="page-footer" v-if="no_clerk_count > 0">
      <view class="footer-btn">
        <view class="footer-left">
          <view class="total-box">
            {{ $t('mdAdmin.noClerk') }} {{ no_clerk_count }}
          </view>
          <view class="choose-box" v-if="isChoose"
            >{{ $t('goods.choosedSku') }}（{{ choosedOrder.length }}）</view
          >
        </view>
        <view class="footer-right">
          <view class="cancel" v-if="isChoose" @click="resetChoose">{{
            $t('person.cancle')
          }}</view>
          <view class="confirm" @click="handleClerkBtn">{{
            isChoose ? $t('person.confirmCancle') : $t('mdAdmin.batchClerk')
          }}</view>
        </view>
      </view>
      <view class="safe"></view>
    </view> -->
		<!-- 新增 -->
		<view>
			<!-- 头部搜索栏 -->
			<view class="df_center bgF paddingS">
				<view class="" style="width: 530rpx;">
					<u-search :input-style="{width:'530rpx',height:'64rpx'}" :show-action="false" height="64rpx"
						bg-color="#F2F2F2" placeholder="请输入订单号称或昵称" v-model="keyword" @change="gotoSearch"></u-search>
				</view>
				<view class="seleIconStyle" @click="iconChange">
					<view class="iconfont" :class="{colorRed:checkShow}" style="font-size: 60rpx;">&#xe751;</view>
				</view>
			</view>

			<!-- 切换栏 -->
			<view class="bgF p24 fsTyle">
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="" style="display: flex;align-items: center;">
						<view v-for="(item,index) in select_classificationArr" :key="index"
							class="seleltClassification scroll-view-item_H" :class="status==item.status ? 'active':''"
							@click="selelt_classification(item.status)">{{item.name}}</view>
					</view>
				</scroll-view>
				<view class="iconStyle" @click="stateDetails">
					<view class="iconfont" :class="{colorRed:stateShow}" style="font-size: 50rpx;">&#xe82b;</view>
				</view>
			</view>

			<!-- 切换栏2 -->
			<view class="switchContent" v-if="stateShow">
				<text :class="status==item.status ? 'active1':''" class="switchContentText mr24"
					v-for="(item,index) in select_classificationArr" :key="index"
					@click="selelt_classification(item.status)">
					{{item.name}}
				</text>
			</view>

			<!-- 商品栏 -->
			<view class="" style="padding: 0rpx 24rpx 24rpx 24rpx;" v-if="listData.length!=0">
				<u-checkbox-group shape="circle" placement="column" @change="checkboxChange">
					<view class="df_a_center mt24" v-for="(item, index) in listData" :key="index">
						<view v-if="checkShow" class=""
							style="display: flex;justify-content: center; align-items: center; ">
							<u-checkbox activeColor="#F0250E" :name="item.id" v-model="item.checked"
								:disabled="item.disabled==1">
							</u-checkbox>
						</view>
						<view class="content">
							<view class="df_a_center_j_b mb24">
								<view class="orderTime">
									订单号：{{item.order_no}}
								</view>
								<view class="stockUp">
									{{item.trade_status_text}}
								</view>
							</view>
							<!-- 商品详细信息 -->
							<view v-if="item.goods_list.length<=4" class="casd" v-for="(item1,index1) in item.goods_list" :key="index1"
								@click.stop="gotoDetail(item)">
								<view class=""
									style="width:140rpx;height:140rpx;border-radius: 10rpx 10rpx 10rpx 10rpx;">
									<image
										style="width:140rpx;height:140rpx;background: #F6F6F6;border-radius: 10rpx 10rpx 10rpx 10rpx;"
										:src="item1.pic" mode=""></image>
								</view>
								<view class="">
									<view class="introduce">
										{{item1.goods_name}}
									</view>
									<view class="salesVolume" v-if="item1.attr.length">
										<text v-for="(content,id) in item1.attr" :key="id">
											{{content.attr_group_name}},{{content.attr_name}}
										</text>
									</view>
								</view>
								<view class="">
									<view class="moneyConter">
										￥{{item1.total_price}}
									</view>
									<view class="numConter">
										X{{item1.num}}
									</view>
								</view>
							</view>
							
							<view v-if="item.goods_list.length>4" class="casd1" @click.stop="gotoDetail(item)">
								<view class="casd1Img" v-for="(item1,index1) in item.goods_list.slice(0, 3)" :key="index1">
									<image
										style="width:140rpx;height:140rpx;background: #F6F6F6;border-radius: 10rpx 10rpx 10rpx 10rpx;"
										:src="item1.pic" mode=""></image>
								</view>
								<view class="" style="display: flex; justify-content: flex-end;flex-grow: 1; color: #8C8C8C;">
									共{{item.goods_list.length}}件
									<u-icon color="#8C8C8C" name="arrow-right"></u-icon>
								</view>
							</view>
							
							
							<view class="content_operate">
								<view class="df">
									<view class="csh">买家留言</view>
									<view class="ml20 buyer">{{item.remark?item.remark:'无留言'}}</view>
								</view>
								<view class="df" style="margin-top: 10rpx;">
									<view class="csh">商家备注</view>
									<view class="ml20 buyer">{{item.words?item.words:'无备注'}}</view>
								</view>
								<view class="df">
									<view class="csh">下单时间</view>
									<view class="ml20 buyer">{{item.created_at}}</view>
								</view>
							</view>
							<view class="surePickup">
								<view class="surePickupName">
									<text>自提信息</text><text
										style="margin-left: 20rpx;">{{item.name}}/{{item.mobile}}</text>
								</view>
								<view class="btnstyle" v-if="item.trade_status != 2 && item.trade_status != 0">
									<view class="deldeStyle" @click="deleteOrder(item.id)">
										删除
									</view>
								</view>
								<view class="btnstyle" >
									<view  v-if="item.trade_status == 0 || item.trade_status == 2" class="deldeStyle" @click="notice(item.id)">
										通知
									</view>
									<view v-if="item.trade_status == 0 || item.trade_status == 2" class="sureStyle ml14" @click="gotoClerk(item)">
										确认自提
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</view>
			<view class="nos " v-if="listData.length==0">
				<view class="iconfont" style="font-size: 80rpx;">&#xe7b7;</view>
				<view class="" style="margin-top: 10rpx;">
					暂无订单
				</view>
			</view>
		</view>
		<!-- 底部全选 -->
		<view class="footer" v-if="checkShow">
			<view class="footerCheckBox" @click="checkedAll">
				<view class="footerText">
					<radio style="transform: scale(0.8)" color="#FA3534" value="r1" :checked="checkAll" />选中
				</view>
			</view>
			<view class="footerBtn">
				<view class="" style="width: 136rpx;">
					<u-button type="error" shape="circle" @click="noticeAll">通知</u-button>
				</view>
				<view class="" style="width: 192rpx; margin-left: 24rpx;">
					<u-button type="error" shape="circle" @click="allConfirmSelfPickup">确认自提</u-button>
				</view>
			</view>
		</view>
      <view class="" style="display: flex;justify-content: center;color: #8C8C8C; margin-top: 20rpx;">
      	{{prompt}}
      </view>
	</view>
	<Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
	import Shenhe from '@/components/shenhe/shenhe';
	import goodsDetail from '../components/goodsDetail/index.vue';

	export default {
		components: {
			goodsDetail,
			Shenhe,
		},
		data() {
			return {
				// 下拉提示
				prompt:'—— 下拉加载更多！——',
				// 暂时存储选中状态
				TemporaryStorage: '',
				// 动态判断复选框的显示和隐藏
				checkShow: false,
				// 动态控制状态详情显示隐藏
				stateShow: false,
				// 滑块位置
				status: -1,
				// 搜索框双向绑定的值
				keyword: '',
				// 底部全选按钮值
				checkAll: false,
				// 复选框
				checkboxValue1: [],
				// 滑块数据
				select_classificationArr: [{
						status: -1,
						name: "全部"
					},
					{
						status: 0,
						name: "待发货"
					},
					{
						status: 2,
						name: "待自提"
					},
					{
						status: 3,
						name: "已完成"
					},
					{
						status: 4,
						name: "待售后"
					},

				],



				listData: [],
				page: 1,
				pageSize: 20,
				row_count: 0,

				no_clerk_count: 0,
				choosedOrder: [],
				isChoose: false,
				scene: '',
			};
		},
		onLoad(t) {
			if (t?.status) {
				this.status = t.status;
			}
			if (t?.scene) {
				let scene = t.scene;
				this.scene = scene;
				this.status = 0;
			}
		},
		onReachBottom() {
			if (this.page * this.pageSize >= this.row_count){
				this.prompt='—— 没有更多订单了！——'
				 return;
			}
			this.page++;
			this.getListData({
				page: this.page,
				status: this.status,
				keyword: this.keyword,
				loadMore: true,
				saas_user_id: this.scene,
				limit:this.pageSize
			});
		},
		computed: {},
		onShow() {
			this.page=1,
			prompt= '—— 下拉加载更多！——',
			this.getListData({
				page: this.page,
				status: this.status,
				keyword: this.keyword,
				saas_user_id: this.scene,
				limit:this.pageSize
			});
		},
		watch: {},
		methods: {
			// 删除按钮
			deleteOrder(id) {
				let deleteOrederA = []
				deleteOrederA.push(id);
				this.$allrequest.mdAdmin
					.deleteOrderArr({
						order_ids: deleteOrederA
					})
					.then(res => {
						// 关闭复选框，清除全选状态
						this.manyUs()
						if (!res.code) {
							uni.showToast({
								title: res.msg,
								icon: 'success',
							});
							this.page=1
							this.getListData({
								page: this.page,
								status: this.status,
								keyword: this.keyword,
								saas_user_id: this.scene,
								limit:this.pageSize
							});
				
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
							});
						}
					});
			},
			// 复选框回调
			checkboxChange(n) {
				this.TemporaryStorage = n
			},

			// 全选
			checkedAll() {
				this.checkAll = !this.checkAll
				if (this.checkAll) {
					let s1 = this.listData.map(val => {
						if(val.disabled==0){
							val.checked = true;
							return val.id
						}
					})
					this.checkboxChange(s1)
				} else {
					let s1 = this.listData.map(val => {
						val.checked = false;
					})
					this.checkboxChange(s1)
				}

			},
			// 单个确认自提核销
			gotoClerk(item) {
				let arr = [item.id];
				this.clerkOrder({
					order_id: JSON.stringify(arr)
				});
			},
			// 全部确认自提按钮
			allConfirmSelfPickup() {
				this.clerkOrder({
					order_id: JSON.stringify(this.TemporaryStorage)
				});
			},
		
			// 全部通知
			noticeAll() {
				uni.showLoading({
					title: this.$t('facePay.requesting'),
				});
				this.$allrequest.mdAdmin
					.notices({
						order_ids: this.TemporaryStorage
					})
					.then(res => {
						uni.hideLoading();
						// 关闭复选框，清除全选状态
						this.manyUs()
						if (!res.code) {
							uni.showToast({
								title: res.msg,
								icon: 'success',
							});

						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
							});
						}
					});
			},
			// 单个通知按钮
			notice(val) {
				uni.showLoading({
					title: this.$t('facePay.requesting'),
				});
				let arr = []
				arr.push(val);
				this.$allrequest.mdAdmin
					.notices({
						order_ids: arr
					})
					.then(res => {
						uni.hideLoading();
						if (!res.code) {
							uni.showToast({
								title: res.msg,
								icon: 'success',
							});

						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
							});
						}
					});
			},
			// 控制列表详情显示与隐藏
			stateDetails() {
				this.stateShow = !this.stateShow
			},
			//控制搜索右边icon状态变化和复选按钮的出现与隐藏
			iconChange() {
				this.checkShow = !this.checkShow
			},
			// 控制滑块切换
			selelt_classification(index) {
				this.page=1
				this.manyUs()
				this.status = index
				this.getListData({
					page: this.page,
					status: this.status,
					keyword: this.keyword,
					saas_user_id: this.scene,
					limit:this.pageSize
				});
			},
			// 跳转商品详情
			gotoDetail(item) {
				if (item.order_type === '1') {
					this.$utils.toUrl(`/user/clerk/clerk?scene=${item.order_no}`);
					return;
				}
			
				this.$utils.toUrl(`/md_admin/order-detail/order-detail?id=${item.id}`);
			},
			// 关闭复选框，清除全选状态函数
			manyUs() {
				this.TemporaryStorage=''
				this.checkShow = false
				this.checkAll = false
				this.listData.map(val => {
					val.checked = false;
				})
			},


			// 旧的
			getListData(params) {
				this.$allrequest.mdAdmin.selfMentionList(params).then(res => {
					if (!res.code) {
						res.data.list.forEach(d => {
							d.goods_list.forEach(k => {
								k.attr = JSON.parse(k.attr);
							});
						});
						if (params.loadMore) {
							this.listData = [...this.listData, ...res.data.list];
							
						} else {
							this.listData = res.data.list;
							if(!res.data.page_count){
								this.prompt=''
							}else if(res.data.row_count<=4){
								this.prompt='—— 没有更多订单了！——'
							}
						}
						this.row_count = res.data.row_count;
						this.no_clerk_count = res.data.no_clerk_count;
					}
				});
			},
			tabsChange(index, item) {
				this.num = index;
				this.status = item.status;
				this.page = 1;
				this.getListData({
					page: this.page,
					status: this.status,
					keyword: this.keyword,
					saas_user_id: this.scene,
				});
				this.resetChoose();
			},
			resetChoose() {
				this.isChoose = false;
				this.choosedOrder = [];
			},
			// 搜索
			gotoSearch(val) {
				this.page = 1;
				this.getListData({
					page: this.page,
					status: this.status,
					keyword: this.keyword,
					saas_user_id: this.scene,
					limit:this.pageSize
				});
			},
			handleClerkBtn() {
				const that = this;
				if (!this.isChoose) {
					this.isChoose = !this.isChoose;
					return;
				} else {
					if (!this.choosedOrder.length) return;
					uni.showModal({
						title: this.$t('order.prompt'),
						content: this.$t('mdAdmin.confirmClerk'),
						success: function(res) {
							if (res.confirm) {
								that.clerkOrder({
									order_id: JSON.stringify(that.choosedOrder)
								});
							} else if (res.cancel) {
							}
						},
					});
				}
			},
			selected(id) {
				return this.choosedOrder.includes(id);
			},
			chooseItem(item) {
				if (item.is_send == 1) return;
				if (this.selected(item.id)) {
					let index = this.choosedOrder.findIndex(d => {
						return d == item.id;
					});
					this.choosedOrder.splice(index, 1);
				} else {
					this.choosedOrder.push(item.id);
				}
			},
			clerkOrder(params) {
				uni.showLoading({
					title: this.$t('facePay.requesting'),
				});
				this.$allrequest.mdAdmin.clerkSelfMentionOrder(params).then(res => {
					uni.hideLoading();
					if (!res.code) {
						uni.showToast({
							title: this.$t('mdAdmin.clerkSuc'),
							icon: 'none',
						});
						setTimeout(() => {
							this.getListData({
								page: this.page,
								status: this.status,
								keyword: this.keyword,
								limit:this.pageSize
							});
						}, 1500);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
						});
					}
				});
			},

		},
	};
</script>

<style lang="scss" scoped>
	.nos {
	     margin-top: 300rpx;
		 text-align: center;
		 color: #C0C4CC;
	}
	.ml14 {
		margin-left: 14rpx;
	}

	.btnstyle {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 24rpx;
	}

	.deldeStyle {
		width: 96rpx;
		height: 58rpx;
		background: #F2F2F2;
		border-radius: 120rpx 120rpx 120rpx 120rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #262626;
		text-align: center;
		line-height: 58rpx;
		font-style: normal;
		text-transform: none;
	}

	.sureStyle {
		width: 144rpx;
		height: 58rpx;
		background: #FDF1F0;
		border-radius: 120rpx 120rpx 120rpx 120rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #F0250E;
		line-height: 58rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.surePickup {
		height: 175rpx;
		margin-top: 24rpx;
	}

	.surePickupName {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #8C8C8C;
		font-style: normal;
		text-transform: none;
		padding: 24rpx 0;
		border-top: 1px solid #F8F8F8;
		border-bottom: 1px solid #F8F8F8;
	}

	.mr24 {
		margin-right: 24rpx;
	}

	.switchContent {
		width: 702rpx;
		margin: 0rpx auto;
		padding-top: 18rpx;
	}

	.switchContentText {
		border-radius: 120rpx;
		padding: 10rpx 24rpx;
		background-color: #fff;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
		line-height: 3;
		/* 设置行高，创建上方间距 */
	}

	.colorRed {
		color: #FA3534;
	}

	.footer {
		height: 140rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 14rpx 24rpx 34rpx 24rpx;
		position: fixed;
		bottom: 0;
	}

	.mb24 {
		margin-bottom: 24rpx;
	}

	.stockUp {
		height: 36rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #F0250E;
		font-style: normal;
		text-transform: none;
	}

	.orderTime {
		height: 36rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #8C8C8C;
		font-style: normal;
		text-transform: none;
	}

	.pricePlatform {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
	}

	.moneyConter {
		height: 42rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
		display: flex;
		justify-content: flex-end;
	}

	.numConter {
		height: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #8C8C8C;
		font-style: normal;
		text-transform: none;
		display: flex;
		justify-content: flex-end;
	}

	.money {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		font-style: normal;
		text-transform: none;
		color: #F0250E;
	}

	.mt22 {
		margin-top: 22rpx;
	}

	.ml24 {
		margin-left: 24rpx;
	}
	.casd1 {
		display: flex;
		align-items: center;
		width: 100%;
	}
	.casd1Img{
		display: flex;
		align-items: center;
		margin-right: 30rpx;
	}

	.salesVolume {
		width: 296rpx;
		// height: 34rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #8C8C8C;
		font-style: normal;
		text-transform: none;
		overflow: hidden;
		// display: -webkit-box;
		// -webkit-line-clamp: 1;
		// /* 控制行数 */
		// -webkit-box-orient: vertical;
		// text-overflow: ellipsis;
		margin-top: 10rpx;
	}

	.casd {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 15rpx;
	}

	.content {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx;
		width: 100%;
	}

	.footerText {
		height: 44rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
		display: flex;
		align-items: center;
	}

	.footerCheckBox {
		display: flex;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
	}

	.footerBtn {
		display: flex;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		font-style: normal;
		text-transform: none;
	}

	.introduce {
		width: 316rpx;
		height: 74rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 控制行数 */
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}

	.df_center {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bgF {
		background-color: #FFF;
	}

	.paddingS {
		padding: 18rpx 15rpx 18rpx 24rpx;
	}

	.seleltClassification {
		margin: 20rpx 52rpx 0rpx 0rpx;
		padding-bottom: 24rpx;
		border-bottom: 3px solid #fff;
	}

	.active {
		border-bottom: 3px solid #F0250E !important;
		color: #F0250E;
		font-weight: 600;
	}

	.active1 {
		color: #F0250E;
	}

	.p24 {
		padding: 0rpx 24rpx;
	}

	.mt24 {
		margin-top: 24rpx;
	}

	.fsTyle {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
		position: relative;
	}

	.df_a_center_j_b {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.df_a_center {
		display: flex;
		align-items: center;
	}

	.iconStyle {
		width: 88rpx;
		height: 85rpx;
		background: #FFFFFF;
		box-shadow: -4rpx 0rpx 4rpx 2rpx rgba(0, 0, 0, 0.05);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		z-index: 999;
		right: 0;
		top: 0;
	}

	.seleIconStyle {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.df {
		display: flex;
	}

	.buyer {
		width: 420rpx;
		white-space: nowrap;
		/* 防止文本换行 */
		overflow: hidden;
		/* 隐藏溢出的文本 */
		text-overflow: ellipsis;
		/* 显示省略号 */
	}

	.csh {
		width: 100rpx;
		height: 34rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #8C8C8C;
		font-style: normal;
		text-transform: none;
	}

	.content_operate {
		padding: 24rpx 0;
		font-weight: 400;
		font-size: 24rpx;
		color: #8C8C8C;
		font-style: normal;
		text-transform: none;
	}

	.ml20 {
		margin-left: 20rpx;
	}

	.page-list {
		width: 100%;
		min-height: 100vh;
		background: #f2f2f2;
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);

		.page-header {
			width: 100%;
			padding-top: 174rpx;

			.search-section {
				width: 100%;
				background-color: #ffffff;
				height: 84rpx;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 111px;
				display: flex;
				align-items: center;
				justify-content: center;

				.input-box {
					width: 92vw;
				}
			}

			.top-tabs {
				width: 100%;
				height: 90rpx;
				background: #ffffff;
				position: fixed;
				left: 0;
				top: 84rpx;
				z-index: 111;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.tab-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.tab-text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #262626;
					}

					.tab-active {
						width: 50rpx;
						height: 6rpx;
						background: #f0250e;
						margin-top: 4rpx;
						opacity: 0;
					}
				}

				.active {
					.tab-text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 600;
						color: #262626;
					}

					.tab-active {
						opacity: 1;
					}
				}
			}
		}

		.page-body {
			width: 100%;
			padding-top: 24rpx;

			.list-item {
				width: 100%;
				background: #ffffff;
				margin-bottom: 24rpx;
				padding: 30rpx 0 24rpx 30rpx;

				.order-num {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-right: 30rpx;

					.order-no {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 600;
						color: #262626;
					}

					.status {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #8c8c8c;
					}

					.status-red {
						color: #f0250e;
					}
				}

				.split-line {
					width: 100%;
					height: 1px;
					background: #f8f8f8;
				}

				.order-goods {
					width: 100%;
					padding: 30rpx 24rpx 30rpx 0;
				}

				.flex-order {
					display: flex;
					align-items: center;

					.icon-box {
						width: 30rpx;
						height: 30rpx;
						position: relative;
						margin-right: 30rpx;

						.iconfont {
							display: inline-block;
							position: absolute;
							left: -7rpx;
							top: -7rpx;
							z-index: 1;
						}

						.icon-reduce-fill {
							color: #bfbfbf;
							font-size: 44rpx;
						}

						.icon-success-fill {
							color: #f0250e;
							font-size: 44rpx;
						}

						.icon-default {
							width: 30rpx;
							height: 30rpx;
							border: 1px solid #707070;
							border-radius: 50%;
							position: absolute;
							left: 0;
							top: 0;
							z-index: 1;
						}
					}
				}

				.order-foot {
					width: 100%;
					padding-top: 24rpx;
					padding-right: 30rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-end;

					.user-info {
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.name,
						.mobile {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #8c8c8c;
						}

						.mobile {
							margin-left: 30rpx;
						}
					}

					.clerk-btn {
						margin-top: 30rpx;
						width: 152rpx;
						height: 60rpx;
						background: #ffffff;
						border: 1px solid #f60313;
						border-radius: 30rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #f0250e;
					}
				}
			}
		}

		.page-footer {
			width: 100%;
			background-color: #ffffff;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 111;

			.footer-btn {
				width: 100%;
				height: 96rpx;
				background: #ffffff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;

				.footer-left {
					display: flex;
					align-items: center;

					.total-box {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 600;
						color: #262626;
					}

					.choose-box {
						margin-left: 20rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #262626;
					}
				}

				.footer-right {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.cancel {
						width: 160rpx;
						height: 76rpx;
						background: #ffffff;
						border: 1px solid #999999;
						border-radius: 38rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 600;
						color: #262626;
						margin-right: 24rpx;
					}

					.confirm {
						width: 160rpx;
						height: 76rpx;
						background: #f0250e;
						border-radius: 38rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 600;
						color: #ffffff;
					}
				}
			}

			.safe {
				padding-bottom: env(safe-area-inset-bottom);
			}
		}
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 90%;
	}
</style>